
import { defineConfig } from 'vite'
// 引入postcss预设环境插件
import postcssPresetEnv from 'postcss-preset-env'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'
// 引入gzip压缩
import { compression } from 'vite-plugin-compression2'
// 引入cnd加速
import importToCDN from 'vite-plugin-cdn-import'

// defineConfig加上可以有语法提示
export default defineConfig({
  optimizeDeps: {
    exclude: [] // 将数组中指定的依赖不进行预构建
  },
  // 用于配置vite环境变量的过滤条件，值为VITE_，则环境变量前面必须加VITE_
  envPrefix: "VITE_",
  // 对css行为进行配置
  css: {
    modules: {
      // 对css模块化的类名配置是采用小驼峰还是中划线分割
      localsConvention: "camelCaseOnly",
      // 对当前模块是采用模块化还是全局，模块化原理是带上随机哈希值作为名字，从而实现模块化
      // 全局则不带哈希值，全局共用一个名字
      scopeBehaviour: 'local',
      // 配置类名，优先级比上面的都高，前提是scopeBehaviour配置项为local
      generateScopedName: '[name]-[local]-[hash:5]',
      // 加深哈希值的随机程度，可加可无，内容可随便填
      hashPrefix: 'hellow',
      // 填写你不想参与css模块化，但名字有含有module的css文件的路径
      globalModulePaths: []
    },
    // 对css预处理器进行配置
    preprocessorOptions: {
      // 配置整个less，全局生效
      less: {
        // 配置项很多，具体可查less文档
        math: 'always', // 表示less运算时，不加括号也能进行计算
        // 配置less 全局变量
        globalVars: {
          // 配置一个全局变量，值为红色
          rootRed: 'red'
        }
      },
      scss: {
        // sass配置和less一样，具体查文档
      },
      // 默认为false,开启之后可以不受文件打包后的影响，控制台打印的报错信息显示源代码位置
      devSourcemap: true
    },
    // 配置postcss，这里写了的话，外面就没必要再配置一个postcss.config.js了
    // 如果外面有postcss.config.js文件，那么外面文件的优先级没这个里面的优先级高
    postcss: {
      plugins: [
        // 开启css语法降级,还会在css属性前面加前缀增强兼容性等
        postcssPresetEnv()
      ]
    }
  },
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  },
  build: {
    // 配置rollup，vite将打包交给rollup来做
    rollupOptions: {
      // 打包文件输出口
      output: {
        // 控制静态资源打包出来后的名字
        assetFileNames: '[hash:5].[name].[ext]'
      },
      // 配置分包
      manualChunks: (id) => {
        // 判断文件路径是不是node_modules，node_modules文件另外打包
        if (id.includes('node_modules')) {
          // return的值为打包后的文件名开头
          return "vendor"
        }
      }
    },
    // 当图片小于1kb时将图片打包成base64
    // 单位这里是b   1kb=1024b  1mb=1024kb
    assetsInlineLimit: 1024,
    // 配置打包输出的文件目录
    outDir: 'dist',
    // 配置打包输出的静态资源的目录名
    assetsDir: 'static',
    // 设置false则打包后代码不压缩，默认是true
    minify: true,
  },
  plugins: [
    // 引入插件，启用gzip打包压缩
    compression({
      threshold: 512000 // 对大于 512kb 的文件进行压缩
    }),
    // 引入插件，使其支持mock
    viteMockServe(),
    // cnd加速
    importToCDN({
      // 配置多个需要cnd加速的静态资源
      modules: [
        {
          name: 'axios',
          // 全局分配给模块的变量，Rollup 需要这个变量名称
          var: 'axios',
          path: 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js'
        },
        {
          // 配置需要cnd加速的第三方资源
          name: 'jquery',
          // 第三方资源导出的变量名
          var: '$',
          path: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'
        }
      ]
    })
  ]
})